<template>
  <div class="xiamu-container" :style="bcimg">
    <h2>夏目友人帐</h2>
  </div>
</template>
<script>
import img from '@/assets/images/xiamu.jpg'
export default {
  data() {
    return {
      bcimg: {
        backgroundImage: 'url(' + img + ')'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.xiamu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 400px;
  background-size: 100% 100%;

  h2 {
    width: 380px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    font-size: 3em;
    color: #64aaf4;
    font-weight: 600;
    font-family: 'STCaiyun';
    box-shadow: 0 0.5px 0.55px rgba(0,0,0,0.1),0 1.8px 2.2px rgba(0,0,0,0.156),
    0 2px 4.2px rgba(0,0,0,0.234), 0 4.2px 7.4px rgba(0,0,0,0.298);
    -webkit-backdrop-filter: blur(20px);
    // backdrop-filter: blur(20px);
    transition: 0.2s ease;
    &:hover {
      box-shadow: 0 0.8px 0.95px rgba(0,0,0,0.134),0 4px 5.2px rgba(0,0,0,0.256),
    0 6px 10.2px rgba(0,0,0,0.274), 0 9.2px 19.4px rgba(0,0,0,0.348);
    }
  }
}
</style>

